<template>

    <el-container class="layout-container-demo">

        <el-header height="">   <!--style="text-align: right"-->
            <div class="toolbar">
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                >
                    <el-menu-item index="0">
                        <img
                                class="LogoImg"
                                src="../assets/12.png"
                                alt="Element logo"
                        />
                    </el-menu-item>
                    <el-menu-item index="1">Processing Center</el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>Workspace</template>
                        <el-menu-item index="2-1">item one</el-menu-item>
                        <el-menu-item index="2-2">item two</el-menu-item>
                        <el-menu-item index="2-3">item three</el-menu-item>
                        <el-sub-menu index="2-4">
                            <template #title>item four</template>
                            <el-menu-item index="2-4-1">item one</el-menu-item>
                            <el-menu-item index="2-4-2">item two</el-menu-item>
                            <el-menu-item index="2-4-3">item three</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item index="5">123</el-menu-item>
                    <el-menu-item index="3" disabled>Info</el-menu-item>
                    <el-menu-item index="4">Orders</el-menu-item>

                </el-menu>

                <!--        <div class="h-6"/>-->


                <!--                <el-dropdown>-->
                <!--                    <el-icon style="margin-right: 8px; margin-top: 1px">-->
                <!--                        <setting/>-->
                <!--                    </el-icon>-->
                <!--                    <template #dropdown>-->
                <!--                        <el-dropdown-menu>-->
                <!--                            <el-dropdown-item>View</el-dropdown-item>-->
                <!--                            <el-dropdown-item>Add</el-dropdown-item>-->
                <!--                            <el-dropdown-item>Delete</el-dropdown-item>-->
                <!--                        </el-dropdown-menu>-->
                <!--                    </template>-->

                <!--                </el-dropdown>-->
                <!--        <span>Tom</span>-->
            </div>
            <div class="user">        <!--style="background-color: aqua"-->
                <el-avatar :size="55" src="#" @error="errorHandler">
                    <img
                            src="../assets/big.jpg"
                    />
                </el-avatar>
            </div>
        </el-header>
        <el-container style="width: 100%">
            <!--边框导航-->
            <el-aside width="17%">

                <!--                <el-row type="flex" class="row-bg" style="height: 80PX" justify="center" align="middle">-->
                <!--                    <el-col :span="10">-->
                <!--                        <el-text type="large" >测试系统</el-text>-->
                <!--                    </el-col>-->
                <!--                </el-row>-->
                <el-scrollbar>
                    <el-menu :default-openeds="['1']">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <message/>
                                </el-icon>
                                导航一
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="routerView('/menu1')">菜单一</el-menu-item>
                                <el-menu-item index="1-2" @click="routerView('/menu2')">菜单二</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group>   <!--title="Group 2"-->
                                <el-menu-item index="1-3">菜单三</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="1-4">
                                <template #title>Option4</template>
                                <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <Menu/>
                                </el-icon>
                                Navigator Two
                            </template>
                            <el-menu-item-group>
                                <template #title>Group 1</template>
                                <el-menu-item index="2-1">Option 1</el-menu-item>
                                <el-menu-item index="2-2">Option 2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="2-3">Option 3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="2-4">
                                <template #title>Option 4</template>
                                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <setting/>
                                </el-icon>
                                Navigator Three
                            </template>
                            <el-menu-item-group>
                                <template #title>Group 1</template>
                                <el-menu-item index="3-1">Option 1</el-menu-item>
                                <el-menu-item index="3-2">Option 2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="Group 2">
                                <el-menu-item index="3-3">Option 3</el-menu-item>
                            </el-menu-item-group>
                            <el-sub-menu index="3-4">
                                <template #title>Option 4</template>
                                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
                            </el-sub-menu>
                        </el-sub-menu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <!--主体内容-->
            <el-main>
                <el-tabs
                        v-model="activeTab"
                        type="card"
                        class="demo-tabs"
                        closable="closable"
                        @tab-remove="removeTab"
                        @tab-click="tabClick"
                >
                    <el-tab-pane
                            v-for="item in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                            :closable="item.closable"
                            :ref="item.ref"
                    >

                        <router-view style="width: 100%; height: 100%;"></router-view>
                    </el-tab-pane>
                </el-tabs>


                <!--        &lt;!&ndash;        <el-scrollbar>&ndash;&gt;-->
                <!--        <el-table :data="userList.slice((currentPage-1)*pageSize,currentPage*pageSize)">-->
                <!--          <el-table-column prop="date" label="Date" width="140"/>-->
                <!--          <el-table-column prop="name" label="Name" width="120"/>-->
                <!--          <el-table-column prop="address" label="Address"/>-->
                <!--        </el-table>-->
                <!--        <el-pagination-->
                <!--            background-->
                <!--            layout=" prev, pager, next,sizes, jumper ,->,total,slot"-->
                <!--            :total="userList.length"-->
                <!--            @current-change="handleCurrentChange"-->
                <!--            :current-page="currentPage"-->
                <!--            :page-size="pageSize"-->
                <!--            :page-sizes="[2,3,4]"-->
                <!--            style="text-align: center"-->
                <!--            @size-change="handleSizeChange">-->
                <!--        </el-pagination>-->
                <!--        </el-scrollbar>-->
            </el-main>

        </el-container>
    </el-container>

</template>

<script>
import {ref} from 'vue'
import {Menu} from "@element-plus/icons-vue";
import menu1 from "@/components/Menu1.vue";

export default {
    components: {Menu},
    computed: {
        setHeight() {
            return document.documentElement.clientHeight - 65
        },
        activeNav() { //当前激活的导航
            return this.$route.path
        }
    },
    data() {
        return {
            activeTab: 1,
            tabIndex: 1,
            isCollapse: false,
            editableTabsValue: 1,
            editableTabs: [{
                title: '首页',
                name: '1',
                closable: true,
                ref: 'tabs',
            }],

            tabsPath: [{
                name: "1",
                path: '/home'
            }],
            //分页参数
            currentPage: 1,
            pageSize: 4,
            userList: [{
                date: '2016-05-02',
                name: 'Tom1',
                address: 'No. 189, Grove St, Los Angeles',
            }, {
                date: '2016-05-02',
                name: 'Tom2',
                address: 'No. 189, Grove St, Los Angeles',
            }, {
                date: '2016-05-02',
                name: 'Tom3',
                address: 'No. 189, Grove St, Los Angeles',
            }, {
                date: '2016-05-02',
                name: 'Tom4',
                address: 'No. 189, Grove St, Los Angeles',
            }, {
                date: '2016-05-02',
                name: 'Tom5',
                address: 'No. 189, Grove St, Los Angeles',
            }, {
                date: '2016-05-02',
                name: 'Tom6',
                address: 'No. 189, Grove St, Los Angeles',
            }]
        }
    },
    methods: {
        isOpen() { //判断左侧栏是否展开或收缩
            console.log(this.editableTabs);
            if (this.isCollapse == false) {
                this.isCollapse = true
            } else {
                this.isCollapse = false
            }
        },


        tabClick(thisTab) {
            console.log("thisTab", thisTab)
            console.log("高亮的下标", this.activeTab)
            let val = this.tabsPath.filter(item => thisTab.name == item.name)
            if (thisTab.props != null) {
                val = this.tabsPath.filter(item => thisTab.props.name == item.name)
            } else {
                val = this.tabsPath.filter(item => thisTab.name == item.name)
            }
            this.$router.push({
                path: val[0].path
            })
            console.log("前往->" + val[0].path)
        },


        removeTab(targetName) {

            let tabs = this.editableTabs
            let activeName = this.activeTab
            console.log("tabs", tabs)
            console.log("targetName" + targetName)
            console.log("activeName-" + activeName)
            console.log("targetName-" + targetName)

            if (activeName.toString() === targetName && targetName != "1") {
                console.log(activeName.toString() === targetName)
                tabs.forEach((tab, index) => {
                    console.log(tab.name + "-" + index)
                    if (tab.name === targetName) {

                        console.log(tabs[index + 1])
                        console.log(tabs[index - 1])
                        const nextTab = tabs[index + 1] || tabs[index - 1]
                        console.log("nextTab" + nextTab)
                        if (nextTab) {
                            activeName = nextTab.name
                            this.tabClick(nextTab)
                            console.log("点击了！！！")
                        }
                    }
                })
            }
            this.editableTabsValue = activeName
            if (targetName != "1") {
                this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
            }

        },

        //分页方法
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
            console.log(this.currentPage);
        },
        handleSizeChange(number) {
            this.pageSize = number;
            console.log("页面大小:" + this.pageSize);
        },
        //菜单跳转的方法
        routerView(url) {
            this.$router.push(url);
        },
    },

    setup() {


        const errorHandler = () => true
        const item = {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        }
        const tableData = ref(Array.from({length: 20}).fill(item))

        const activeIndex = ref('1')
        const activeIndex2 = ref('1')
        const handleSelect = (key, keyPath) => {
            console.log(key, keyPath)
        }
        return {
            tableData,
            activeIndex,
            activeIndex2,
            handleSelect,
            errorHandler
        }
    },
    watch: {
        '$route': function (to) {
            let flag = true;
            const path = to.path
            console.log("路由路径-" + path)
            console.log(to.name)

            // metif (Object.keys(to.meta).length != 0) {
            console.log(this.$refs.tabs.length)
            for (let i = 0; i < this.$refs.tabs.length; i++) {

                //首页不判断 如果页面已存在，则直接定位当页面，否则新增tab页面
                console.log(this.$refs.tabs[i].label)
                if (this.$refs.tabs[i].label == to.name) {
                    this.activeTab = this.$refs.tabs[i].name  //定位到已打开页面
                    flag = false
                    break
                }

            }
            if (to.name == "首页") {
                flag = false
            }
            if (flag) {
                const thisName = to.name;
                console.log("to", to)
                //对tabs的当前激活下标和tabs数量进行自加
                console.log(this.tabIndex)
                let newActiveIndex = ++this.tabIndex + ''
                this.editableTabs.push({
                    title: thisName,
                    name: String(newActiveIndex),
                    ref: 'tabs',
                    closable: true,
                    path: path
                })
                this.activeTab = newActiveIndex

                console.log("标签数组", this.editableTabs)

                if (this.tabsPath.indexOf(path) == -1) {
                    this.tabsPath.push({
                        name: newActiveIndex,
                        path: path
                    })
                }
            }
            // }
        }
    }

}

</script>

<style>
html,
body {
    padding: 0px;
    margin: 0px;
}

.layout-container-demo {
    height: 100%;
}

.el-aside {
    background-color: #f8f8f8;
    /* 设置高度铺满屏幕 */
    min-height: 91vh;
}

.LogoImg {
    width: 200px;
}

.el-menu-item {
    padding-right: 0PX;
    padding-left: 0PX
}

.el-avatar {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .5)); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .5));

}

.el-menu--horizontal {
    /*--el-menu-horizontal-height: 50%;*/
}

.el-container {
    /*height: 100%;*/
}

.el-main {
    --el-main-padding: 0px
}

/*.el-tab-pane{*/
/*    background-color: grey;*/
/*}*/
/*.el-menu-item {*/
/*    height: 100%;*/
/*}*/
.el-menu-item:nth-of-type(1) {
    /*height: 83%;*/
}

.el-tabs__item {
    height: 35px;
    color: grey;
    text-align: center;
    margin-right: 2PX;
    /*border: #f2f2f2 solid;*/
    /*padding-top: 5px;*/
    font-size: 20px;
    background-color: #f2f2f2;
}


.el-sub-menu {
    height: 100%;
}

.toolbar {
    height: 100%;
    width: 95%;
    display: flow;
    float: left;
}

.user {
    display: flow;
    float: right;
    height: 100%;
    width: 5%;
    padding-top: 3px
}

/*.el-header{*/
/*    display: flow;*/
/*}*/

.el-menu {
    /*height: 100%;*/
}


.el-menu--horizontal > .el-menu-item:nth-child(1) {
    margin-right: auto;
}

/*.layout-container-demo .el-header {*/
/*    position: relative;*/
/*    background-color: var(--el-color-primary-light-7);*/
/*    color: var(--el-text-color-primary);*/
/*}*/
/*.layout-container-demo .el-aside {*/
/*    color: var(--el-text-color-primary);*/
/*    background: var(--el-color-primary-light-8);*/
/*}*/
/*.layout-container-demo .el-menu {*/
/*    border-right: none;*/
/*}*/
/*.layout-container-demo .el-main {*/
/*    padding: 0;*/
/*}*/
/*.layout-container-demo .toolbar {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    height: 100%;*/
/*    right: 20px;*/
/*}*/
</style>